<template>
<div class="roles">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-table v-loading="loading" :data="rigthList" border style="width: 100%">
    <el-table-column type="index" width="50">
    </el-table-column>
    <el-table-column prop="authName" label="权限名称" width="180">
    </el-table-column>
    <el-table-column prop="path" label="路径" width="180">
    </el-table-column>
    <el-table-column label="层级">
      <template slot-scope="scope">
        <span>{{scope.row.level|fmtLevel}}</span>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

           

<script>
import {
  getRigthList
} from "@/api";
export default {
  data() {
    return {
      loading: true,
      rigthList: []
    };
  },
  filters: {
    fmtLevel(level) {
      if (level === "0") {
        return "一级";
      } else if (level === "1") {
        return "二级";
      } else {
        return "三级";
      }
    }
  },
  created() {
    getRigthList({
      type: "list"
    }).then(res => {
      // console.log(res);
      if (res.meta.status === 200) {
        this.rigthList = res.data;
        this.loading = false;
      }
    });
  }
};
</script>

<style scoped>
</style>
